<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Affix/侧边栏停靠</title>
		
		<!--有点类似于侧边栏停靠的效果-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			/*通过样式 来调整其 位置属性 等*/
			.affixd-element-top.affix{top:10px;}
			.affixd-element-top.affix-bottom{position:relative;}
			
			.affixed-element-buttom.affix{bottom: 10px;}
			.affixed-element-buttom.affix-bottom{position:relative;}
		</style>
	</head>
	<body>
		<div class="container">
			<!--列表组
				利用栅格系统规定 宽度 和所站的比例
				affixd-element-top 左边居定的效果
				js-affixed-element-top 所给的名称
			-->
			<div class="col-md-3">
				<ul class="list-group affixd-element-top js-affixed-element-top">
					<!--每一个子选项list-group-item -->
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
					<li class="list-group-item">这是affix的测试</li>
				</ul>
			</div>
			<div  class="col-md-6 js-content">
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
				<p>
					Use data attributes to easily control the position of the carousel.
					 data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. 
					 Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", 
					 which shifts the slide position to a particular index beginning with 0.
				</p>
			</div>
			<div class="col-md-3">
				<ul class="list-group affixed-element-buttom js-affixed-element-buttom">
					<li class="list-group-item">这是一个测试</li>
					<li class="list-group-item">这是一个测试</li>
					<li class="list-group-item">这是一个测试</li>
					<li class="list-group-item">这是一个测试</li>
					<li class="list-group-item">这是一个测试</li>
					<li class="list-group-item">这是一个测试</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$(".js-affixed-element-top").affix({
					offset :{ //它有一个默认值
						
					}
				})
				$(".js-affixed-element-buttom").affix({
					offset :{//它有一个默认值
						buttom :200
					}
				})
			})
		</script>
	</body>
</html>
